<template>
    <div class="canvasModal flex justify-around">
        <div class="pic">
            <img id="parentImg" style="height:400px;" src="@/assets/images/1.png"/>
            <el-button type="primary" @click="initCanvas(1)">画图1</el-button>
            <el-button type="primary" @click="initCanvas(2)">画图2</el-button>
            <el-button type="primary" @click="initCanvas(3)">画图3</el-button>
            <el-button type="primary" @click="initCanvas(4)">画图4</el-button>
            <img :src="canvasImg"/>
        </div>
        <div class="canvasBox">
            <canvas id="myCanvas" style="width:500px;height:500px"></canvas>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            canvasImg:''
        }
    },
    methods: {
        initCanvas(scale=1){
            const [b_w,b_h]=[1000,1000]
            const cvs = document.getElementById('myCanvas');
            const ctx = cvs.getContext('2d');
            const getPixelRatio = (context)=>{
                const backingStore =
                context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
                return (window.devicePixelRatio || 1) / backingStore;
            }
            const ratio = getPixelRatio(ctx);
            const image = document.getElementById('parentImg')
            cvs.width = b_w * ratio;
            cvs.height = b_h * ratio;
            ctx.clearRect(0,0,b_w * ratio,b_h * ratio)
            // 画图操作
            ctx.drawImage(image,0,0, b_w * ratio, b_h * ratio);
            ctx.font= 10*scale + "px/1 Tahoma,Helvetica,Arial,'宋体',sans-serif";
            ctx.fillStyle = "#192689"
            ctx.fillText("零三的笔记",10,420)
            ctx.fillText("https://web03.cn",10,430+5*scale)
            ctx.scale(scale,scale);
            const base64 = cvs.toDataURL("image/png", 2.0);
            this.canvasImg = base64
        },
    },
}
</script>
<style lang="less" scoped>
.canvasModal{
    height:100%;
    background: #fff;
}
.pic{
    padding:20px;
    margin:20px;
    border:1px solid #e6e6e6;
    img{
        height:auto;
    }
}
</style>